<template>
	<view class="content">
		<gameBasics />
		<view class="content_">
			<view class="title">
				<block v-if="game_config.type!=10&&!(game_config.type==9&&teamList.length==2)">
					第{{game_config.turn_num}}轮 ——
				</block>

				<block v-if="game_config.part_num<=game_config.game_num">
					第{{game_config.part_num}}/{{game_config.game_num}}局
				</block>
				<block v-else>
					加时赛
				</block>
			</view>

			<view class="team" v-if="gameChall.length<=2">
				<!-- filter:grayscale(100%); -->
				<view class="team_item">
					<image :src="gameChall[0].teamList.pic" mode="aspectFill"
						:style="{border:gameChall[0].status==2?'calc(4vmin / 7.5) solid #FED194':''}"></image>
					<view class="">
						{{gameChall[0].teamList.title}}
					</view>
					<view class="icon">
						<u-icon name="checkmark-circle-fill" size="calc(42vmin / 7.5)"
							:color="gameChall[0].status==2?'#FED194':'#ccc'"></u-icon>
					</view>

				</view>

				<view class="vs">
					VS
				</view>

				<view class="team_item">
					<image :src="gameChall[1].teamList.pic" mode="aspectFill"
						:style="{border:gameChall[1].status==2?'calc(2vmin / 7.5) solid #FED194;':''}"></image>
					<view class="">
						{{gameChall[1].teamList.title}}
					</view>
					<view class="icon">
						<u-icon name="checkmark-circle-fill" size="calc(42vmin / 7.5)"
							:color="gameChall[1].status==2?'#FED194':'#ccc'"></u-icon>
					</view>
				</view>
			</view>
			<view class="team" v-else>
				<!-- filter:grayscale(100%); -->
				<view class="team_item" v-for="(item ,index) in gameChall">
					<image :src="item.teamList.pic" mode="aspectFill"
						:style="{border:item.status==2?'calc(2vmin / 7.5) solid #FED194;':''}"></image>
					<view class="">
						{{item.teamList.title}}
					</view>

					<view class="icon">
						<u-icon name="checkmark-circle-fill" size="calc(42vmin / 7.5)"
							:color="item.status==2?'#FED194':'#ccc'"></u-icon>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;flex-direction: row-reverse;">
				<view class="game_btn" @click="prepare" :style="{opacity:userPeople.power?1:0}" v-if="userPeople.power">
					<view class="">

					</view>
					{{userPeople.status==2?'准备中':'准备'}}
				</view>
				<view class="" style="margin: calc(60vmin / 7.5) calc(40vmin / 7.5);padding: calc(20vmin / 7.5) 0;"
					v-else>
					等待队长准备。。。
				</view>
			</view>

		</view>
		<gameLoading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameData: {},
				gameChall: [],
				userPeople: {},
				game_config: {},
				teamList: [],
				acceptStatus: true
			}
		},
		onUnload() {
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			console.log(currentRoute, '页面关闭')
			this.acceptStatus = false
			// uni.$off('onMessage') 
			uni.setStorageSync('audioPk', '');
		},

		mounted() {

			uni.$on('onMessage', (res) => {
				if (!this.acceptStatus) return;
				this.$nextTick(() => {
					this.$store.commit('switchGame', {
						code: false
					})
				})
				if (res.data.code != 202) return;
				this.gameData = res.data.game
				this.gameChall = res.data.game_chall
				this.game_config = res.data.game_config
				this.teamList = res.data.team
				this.userPeople = res.data.userPeople
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {


			prepare() {
				if (!this.userPeople.power || this.userPeople.status == 2) return;
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId
				}
				this.$myRuquestWs('home/game/team_go_pk', data)


			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;

	}

	.game_btn {
		width: calc(200vmin / 7.5);
		margin: 0;
	}

	.content_ {
		width: 95vw;
		height: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.title {
			font-size: calc(70vmin / 7.5);
			// font-weight: 700;
			text-align: center;
			color: #333333;
		}

		.team {
			display: flex;
			text-align: center;
			padding: 0 18vw;

			.vs {
				flex: 1;
				font-size: calc(120vmin / 7.5);
				font-weight: 700;
			}

			.team_item {
				padding: calc(15vmin / 7.5) 0;

				filter: grayscale(0%);

				flex: 1;
				font-weight: 700;
				font-size: calc(32vmin / 7.5);
				position: relative;

				.icon {
					position: absolute;
					top: calc(140vmin / 7.5);
					left: 50%;
					transform: translateX(-50%);
					background-color: #fff;
					border-radius: 50%;
				}

				image {
					width: calc(140vmin / 7.5);
					height: calc(140vmin / 7.5);
					margin: 0 auto;
					margin-bottom: calc(16vmin / 7.5);
				}
			}
		}
	}
</style>
